<template>
	<!-- 背景 -->
	<image class="bg-image" src='@/static/welcomeimg.png'></image>
	<view class="welcome-page">
		<!-- 头像 -->
		<view class="avatar-container">
			<!-- <image class="avatar" src="../../static/user.png" mode="aspectFill" ></image> -->
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<!-- <image class="avatar" src="../../static/user.png"></image> -->
				<image class="avatar" :src="avatarUrl"></image>
			</button>
		</view>

		<!-- 用户名 -->
		<view class="username-container">
			<!-- <text class="username">用户名</text> -->
			<input class="username" v-model="nickname" type="nickname" placeholder="请输入昵称" />
		</view>

		<!-- 按钮 -->
		<view class="button-container">
			<button class="enter-button" @click="enterHandler">{{ buttonText }}</button>
		</view>
	</view>


	<!-- 调试 -->
	<view class="my">
		<button @tap="user.setUserInfo({ 
  		avatar: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png',
  		openid: 'oYo9u6yEshe2Np1yGlaxgezn6qo8',
  		userid: 1,
  		username: '硬编码'
  	})" size="mini" plain type="primary">
			保存用户1信息
		</button>
		<button @tap="user.setUserInfo({
			avatar: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png',
			openid: 'oYo9u6yEshe2Np1yGlaxgezn6qo8',
			userid: 2,
			username: '硬编码'
		})" size="mini" plain type="primary">
				保存用户2信息
			</button><button @tap="user.setUserInfo({ 
  		avatar: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png',
  		openid: 'oYo9u6yEshe2Np1yGlaxgezn6qo8',
  		userid: 3,
  		username: '硬编码'
  	})" size="mini" plain type="primary">
			保存用户3信息
		</button><button @tap="user.setUserInfo({ 
  		avatar: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png',
  		openid: 'oYo9u6yEshe2Np1yGlaxgezn6qo8',
  		userid: 4,
  		username: '硬编码'
  	})" size="mini" plain type="primary">
			保存用户4信息
		</button>
		<button @tap="user.clearUserInfo()" size="mini" plain type="warn">
			清理用户信息
		</button>
	</view>
	
</template>

<script setup>
	import {ref,onMounted} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'; // 如果是在微信小程序环境中，请确保引入正确的生命周期钩子
	import {userStore} from '@/stores/modules/user.js';

	// 获取用户信息
	const user = userStore();

	// 定义响应式数据
	const avatarUrl = ref(
		'https://ts1.cn.mm.bing.net/th/id/R-C.35b0a27f015d26ebeb94e8ce991d353f?rik=AwTPnPvuRI87kQ&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f08%2f69%2fbW7OT55QAA.jpg&ehk=nnEa1R8Y15No3AwK5G%2f7Nm6%2b5oHBGLYKJArsfjl%2bqRc%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
		);
	const nickname = ref('');
	const buttonText = ref('进入');

	// 生命周期钩子
	onLoad(() => {
		// 加载缓存
		getUserInfoFromCache();
	});

	// 定义方法
	const getUserInfoFromCache = () => {
		const userinfo = JSON.parse(uni.getStorageSync('user')).userinfo; // 从缓存中获取用户信息，将json转为JavaScript对象
		// 检查 user 是否存在并且具有 userinfo 属性
		if (userinfo && userinfo.avatar && userinfo.username) {
			avatarUrl.value = userinfo.avatar;
			nickname.value = userinfo.username;
			console.log(avatarUrl)
			console.log(nickname)
			buttonText.value = '欢迎回来';
		} else {
			console.log("未找到用户信息或用户信息不完整");
			// 可以在这里添加一些错误处理，例如设置默认值或提示用户登录等
		}
	};

	const onChooseAvatar = (e) => {
		const {
			avatarUrl: newAvatarUrl
		} = e.detail;
		avatarUrl.value = newAvatarUrl;
	};

	const enterHandler = () => {
		console.log("enter");
		// if用户名不存在且用户更新了默认头像,则发送后端请求更新数据库,跟新缓存,否则使用默认的头像用户名.
		// console.log(avatarUrl.value);
		// console.log("nickname:", nickname.value);
		// uni.switchTab({ url: '/pages/index/index' });
	};
	
</script>

<style>
	.bg-image {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	.welcome-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 90vh;
		position: relative;
		overflow: hidden;
		/* 防止页面滚动 */
	}

	.avatar-container {
		margin-top: 10vh;
		/* 调整头像的位置，使其更靠近页面的中上部 */
		margin-bottom: 20px;
		/* 调整头像和用户名之间的距离 */
	}

	.avatar {
		width: 120px;
		/* 增大头像的大小 */
		height: 120px;
		border-radius: 50%;
	}

	.username-container {
		margin-bottom: 30px;
		border: 1px solid black;

		/* background-color: black; */
	}

	.username {
		font-size: 18px;
		/* 增大用户名的字体大小 */
		color: rgba(255, 255, 255, 0.8);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		left: 50%;
		border-radius: 30rpx;
		font-family: 'Helvetica Neue', sans-serif;
		/* 更改用户名的字体 */
	}

	.enter-button {
		padding: 10px 20px;
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 5px;
		position: absolute;
		top: 37%;
		/* 将按钮定位在页面垂直方向的中心位置 */
		left: 50%;
		/* 将按钮定位在页面水平方向的中心位置 */
		transform: translate(-50%, 50%);
		/* 调整按钮位置，使其完全居中 */
	}
</style>